<template>
  <div>
      <ul>
          <li v-for="(item,index) in arr" :key="index">
            {{ item }}
          </li>
      </ul>
      <button @click="arr.push(6)">数组最后添加一个元素</button>
      <button @click="count++">加1 -- {{ count }}</button>
  </div>
</template>

<script>
export default {
    // initState ==> if (opts.data)  ==> initData()
    data(){
        return {
            arr:[1, 2, 3, 4, 5],
            count:100
        }
    },
    // 组件更新前  --> 数据是新的，页面是旧的
    beforeUpdate(){
        // this.count++
        // this.arr.push(6)
        // 点击之后，给数组增加一个元素，我想获取第6个li元素
        // console.log('beforeUpdate')
        // arr.push(6)  ==> 但是数据更新了，但是虚拟dom还没有对比重新渲染~~
        console.log(document.querySelectorAll('ul>li')[5], 'beforeUpdate')

    },
    // 组件更新后  --> 数据是更新后的，页面也是重新渲染后的
    updated(){
        // 问题：当组件更新完后，如果在updated里面又操作了数据，让视图更新了，会导致一个死循环
        // 怎么解决呢？ 不要用它~~~  不要在组件更新后，又写操作数据的逻辑代码~~
        // ==> 可以放到watch中去监听数据的变化~~~不需要放到生命周期中执行那部分逻辑
        // ===> 少用这两个生命周期~~
        // this.count++
        console.log('updated')
        // this.arr.push(6)
        console.log(document.querySelectorAll('ul>li')[5], 'updated')
    }
}
</script>

<style>

</style>